<template>
    <view class="pageWrapper" :style="{ '--color': color }">
        <status-bar title="确定订单"></status-bar>

        <Toggles
            :pageData="pageData"
            :delivery="delivery"
            :goods_id="goods_id"
            :specs="specs"
            :car_id="car_id"
            @Use_tabWay="Use_tabWay"
            @Usesite="Address = $event"
            @buy_name="uname = $event"
            @buy_phone="utel = $event"
            ref="toggels"
            @Updateproduct="Updateproduct"
        ></Toggles>

        <Product :pageData="pageData" :arg="requestData" :goods_id="goods_id" :car_id="car_id" @changeData="changeData" @getPageData="getPageData"></Product>

        <Group :open_group="open_group" :group_id="group_id" :pageData="pageData"></Group>

        <loading-view :loading="!pageData" marginTop="30" rows="4" Width="710rpx">
            <view class="wrapper">
                <view class="wrapper_view">
                    <view class="AllBox">
                        <view class="row j-sb a-center">
                            <view class="d-flex a-center">
                                <text class="color_33 size32">商品总价</text>
                                <text class="color_99 size28 m-left10">共{{ pageData.allGoodsNumber }}件商品</text>
                            </view>
                            <view class="d-flex">
                                <view class="Pricesymbol">￥</view>
                                <text class="Price">{{ allGoodsMoney }}</text>
                            </view>
                        </view>
                        <text class="color_99 h6" v-if="pageData.allowBuyTitle">{{ pageData.allowBuyTitle }}</text>
                    </view>

                    <view class="freight">
                        <view class="row j-sb a-center">
                            <text class="color_33 size32">配送费</text>
                            <view class="d-flex" v-if="Number(pageData.express) > 0">
                                <view class="Pricesymbol">￥</view>
                                <text class="Price">{{ freight }}</text>
                            </view>
                            <text class="color_33 size32" v-else>{{ pageData.express_text }}</text>
                        </view>
                        <text class="color_99 h6" v-if="pageData.freeExpressTitle">{{ pageData.freeExpressTitle }}</text>
                    </view>
                    <view class="freight" v-if="pageData.all_packing && pageData.all_packing > 0">
                        <view class="row j-sb a-center">
                            <text class="color_33 size32">打包费</text>
                            <view class="d-flex">
                                <view class="Pricesymbol">￥</view>
                                <text class="Price">{{ pageData.all_packing }}</text>
                            </view>
                        </view>
                    </view>

                    <Activity :Sale="Sale"></Activity>

                    <Member :Sale="Sale"></Member>

                    <Coupon :Sale="Sale" @Use_couponId="Use_couponId" :pageData="requestData"></Coupon>

                    <Points :Sale="Sale" :pageData="requestData" @Use_points="Use_points"></Points>
                </view>

                <view class="byJob">
                    <text class="color_33 size34 m-right10">合计：</text>
                    <view class="d-flex">
                        <view class="Pricesymbol">￥</view>
                        <text class="Price">{{ paymentMoney == 0 ? '0.00' : parseFloat(paymentMoney).toFixed(2) }}</text>
                    </view>
                </view>
            </view>
        </loading-view>

        <loading-view :loading="!pageData" marginTop="30" rows="1" :rowsWidth="['100%']" Width="710rpx" rowsHeight="50">
            <view class="Message">
                <view class="leaveword">
                    <text class="color_33 size32">买家留言</text>
                    <input type="text" class="leavInput" v-model="remark" placeholder-class="placeClass" placeholder="留言建议提前协商(200字以内)" />
                </view>
            </view>
        </loading-view>

        <!-- 平台通告信息 -->
        <view class="annunciate" v-if="pageData.tipsText">
            <u-parse :content="pageData.tipsText" :domain="imgUrl"></u-parse>
        </view>

        <!-- 支付方式 -->
        <view class="payList" v-if="payMode.length">
            <view class="size32 color_33 p-left24">选择支付账户</view>
            <view class="row m-top30">
                <view
                    class="item flexac f-column"
                    :class="{ active: payType == item.payType, disabled: item.money && parseFloat(item.money) < parseFloat(paymentMoney) }"
                    @click="changePay(item)"
                    v-for="(item, index) in payMode"
                    :key="index"
                >
                    <view class="size28">{{ item.title }}</view>
                    <view class="h6 color_99 m-top4" v-if="item.money">{{ item.money }}</view>
                </view>
            </view>
        </view>

        <view class="footer" v-if="pageData">
            <view class="footerBox">
                <view class="Copewith">
                    <text class="color_33 size34">应付：</text>
                    <view class="d-flex">
                        <view class="withsymbol">￥</view>
                        <text class="withPrice">
                            {{ paymentMoney == 0 ? '0.00' : parseFloat(paymentMoney).toFixed(2) }}
                        </text>
                    </view>
                </view>
                <view class="subMit" :class="isContinue ? 'bgcolor' : 'bgCC'" @click="Continue">立即支付</view>
            </view>
        </view>
    </view>
</template>

<script>
    import { mapState, mapMutations } from 'vuex';
    import Toggles from './components/Toggles.vue';
    import Product from './components/Product.vue';
    import Group from './components/Group.vue';
    import Address from './components/Address.vue';
    import Coupon from './components/Coupon.vue';
    import Points from './components/Points.vue';
    import Activity from './components/Activity.vue';
    import Member from './components/Member.vue';
    import LoadingView from './components/LoadingView.vue';
    import Api from '@/common/Api.js';
    export default {
        components: {
            Toggles,
            Product,
            Group,
            Address,
            Coupon,
            Points,
            Activity,
            Member,
            LoadingView
        },
        data() {
            return {
                imgUrl: this.imgUrl,
                goods_id: '',
                goods_num: '',
                car_id: '', // 购物车购买
                group_id: '', //参团购买
                open_group: '', // 开团购买 1为开团
                record_id: '', // 砍价
                specs: {}, // 规格
                Address: '',
                paymentMoney: '', // 实付款
                delivery: 0,
                pageData: '',
                uname: '',
                utel: '',
                remark: '', // 留言备注

                couponsId: '',
                Sale: '',
                useIntegral: 0, // 是否使用积分 0不使用 1使用
                payMode: [], // 支付方式
                payType: '',
                playid: '',
                payFlag: 0
            };
        },
        onLoad(opt) {
            if (opt.goods_id) this.goods_id = opt.goods_id;
            if (opt.goods_num) this.goods_num = opt.goods_num;
            if (opt.car_id) this.car_id = opt.car_id;
            if (opt.open_group) this.open_group = opt.open_group;
            if (opt.group_id) this.group_id = opt.group_id;
            if (opt.record_id) this.record_id = opt.record_id;
            if (opt.delivery) this.delivery = opt.delivery;
            if (opt.specs_bind_id) {
                this.specs = {
                    specs_bind_id: opt.specs_bind_id,
                    specs_bind_text: opt.specs_bind_text
                };
            }
        },
        onUnload() {
            this.payFlag = 0;
        },
        onShow() {
            this.getPageData();

            let options = wx.getEnterOptionsSync();
            if (options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3' && this.payFlag == 1) {
                let extraData = options.referrerInfo.extraData;
                if (!extraData) return;
                if (extraData.code == 'success') {
                    this.$rectTo('/pages/index/pay_scs?playid=' + this.playid);
                } else {
                    this.$rectTo('/pages/index/orderList?status=0');
                }
            }
        },
        methods: {
            ...mapMutations(['updateOrderstatus']),
            getPageData() {
                let url = '/zzj_singleSaleApi/getPurchase';
                if (this.record_id) url = '/BargainApi/getPurchase';
                let shop_id = uni.getStorageSync('shop_id') || '';
                this.$http
                    .get({
                        url,
                        data: {
                            goods_id: this.goods_id,
                            num: this.goods_num,
                            specs_bind_id: this.specs.specs_bind_id ?? '',
                            Aregion: this.Address.Aregion + this.Address.Aaddress,
                            car_id: this.car_id,
                            group_id: this.group_id,
                            open_group: this.open_group,
                            record_id: this.record_id,
                            shop_id: this.car_id ? '' : shop_id,
                            delivery: this.delivery
                        }
                    })
                    .then((res) => {
                        if (res.code != 100) return this.$Toast(res.msg);
                        const result = res;
                        this.paymentMoney = result.totalMoney;
                        this.pageData = result;
                        this.payMode = result.payMode || [];
                        if (this.payMode.length) {
                            if (this.payType) {
                                let current = this.payMode.find((item) => item.payType == this.payType);
                                if (!current.money || parseFloat(current.money) >= parseFloat(this.paymentMoney)) return;
                            }
                            let first = this.payMode.find((item) => !item.money || parseFloat(item.money) >= parseFloat(this.paymentMoney));
                            if (first) this.payType = first.payType;
                        }
                        if (this.group_id || this.open_group) return;

                        // allowBuy 最低下单金额
                        result.allowBuy == 0 ? this.updateOrderstatus(false) : this.updateOrderstatus(true);
                        // this.$refs('toggels').getOldAddress();
                        this.getPreferential();
                    });
            },

            Use_tabWay(event) {
                // if (this.delivery == event) return
                this.delivery = event;
                this.getPageData();
            },
            async getPreferential() {
                const paramData = await Api.getPreferential(this.requestData);
                this.Sale = paramData;
                this.paymentMoney = paramData.payMoney;
            },
            Use_couponId(event) {
                this.couponsId = event;
                this.getPreferential();
            },
            Use_points() {
                this.useIntegral = this.useIntegral == 1 ? 0 : 1;
                this.getPreferential();
            },

            Continue() {
                if (this.playid) return this.pay_money(this.playid);
                if (!this.isContinue) return;
                if (this.pageData.allowBuy == 0) return this.$Toast(this.pageData.allowBuyTitle);
                if (this.delivery == 1) {
                    if (!this.Address.Aaddress) return this.$Toast('请选择收货地址');
                    this.uname = this.Address.Aname;
                    this.utel = this.Address.Amobile;
                }
                if (this.delivery == 2) {
                    if (!this.uname) return this.$Toast('请输入姓名');
                    if (!this.utel) return this.$Toast('请输入电话');
                    if (!this.$reg.phone.test(this.utel)) return this.$Toast('输入电话号码有误');
                }
                this.$Modal('是否确定支付', '支付成功后可在我的订单中查看').then((config) => {
                    if (config) this.InitiatePayment();
                });
            },
            InitiatePayment() {
                let url;
                let paramData = {
                    delivery: this.delivery,
                    receivingAddress: this.Address.Aregion + this.Address.Aaddress,
                    uname: this.uname,
                    utel: this.utel,
                    express: this.pageData.express,
                    totalMoney: this.paymentMoney,
                    remarks: this.remark,
                    couponID: this.couponsId,
                    useIntegral: this.useIntegral,
                    share_v_id: this.share_v_id,
                    group_id: this.group_id,
                    shop_id: uni.getStorageSync('shop_id') || '',
                    aes_coupon: this.Sale.aes_coupon ? this.Sale.aes_coupon : ''
                };
                if (this.goods_id) {
                    // 普通下单
                    url = '/zzj_singleSaleApi/generateOrder';
                    paramData['goods_id'] = this.goods_id;
                    paramData['num'] = this.goods_num;
                    paramData['single'] = 1;
                    paramData['specs_bind_id'] = this.specs.specs_bind_id ?? '';
                    paramData['specs_bind_text'] = this.specs.specs_bind_text ?? '';
                }
                if (this.car_id) {
                    // 购物车下单
                    url = '/zzj_singleSaleApi/storePayCart';
                    paramData['couponsId'] = this.couponsId;
                    paramData['car_id'] = this.car_id;
                }
                if (this.record_id) {
                    // 砍价下单
                    url = '/BargainApi/generateOrder';
                    paramData['record_id'] = this.record_id;
                }
                if (this.open_group == 1 || this.group_id) {
                    // 开团购买
                    paramData['single'] = 0;
                }

                this.$showLoading('');
                this.$http
                    .post({
                        url,
                        data: paramData
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 100) return this.$Toast(res.msg);
                        uni.setStorageSync('shop_id', this.ordersShop_id);

                        // #ifdef H5
                        window.location.href = 'https://sra.mogeie.com/index.php/accountPay/weChatCashierPage?orderStr=' + res.payID;
                        // #endif
                        // #ifndef H5
                        // this.$rectTo('/moneyPage/capital/checkstand?payid=' + res.payID);
                        this.playid = res.payID;
                        this.pay_money(res.payID);
                        // #endif
                    });
            },

            changeData(event, num = 1) {
                if (event == 1) this.goods_num--;
                if (event == 2) this.goods_num++;
                if (event == 3) this.goods_num = num;
                this.getPageData();
            },
            // 超出范围更新产品
            Updateproduct(Result) {
                if (this.goods_id) this.goods_id = Result.newGoodsId;
                if (this.car_id) this.car_id = Result.newCardId;
                if (Result.newGoodsSpecId) this.specs.specs_bind_id = Result.newGoodsSpecId;
                if (Result.needOperateShopId) uni.setStorageSync('shop_id', Result.needOperateShopId);
                this.getPageData();
            },

            changePay(item) {
                if (item.money && parseFloat(item.money) < parseFloat(this.paymentMoney)) return;
                this.payType = item.payType;
            },

            pay_money(playid) {
                let that = this;
                this.$showLoading('支付中···');
                this.$http
                    .post({
                        url: '/accountPay/cashierStorePageAjax',
                        data: {
                            orderAesStr: playid,
                            payType: this.payType,
                            openId: this.openid
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 100) return this.$Toast(res.msg);
                        var data = res.data;
                        const Result = res.data;
                        // 微信支付
                        if (this.payType == 1) {
                            // #ifdef MP-WEIXIN
                            if (Result.extraData) {
                                this.payFlag = 1;
                                wx.openEmbeddedMiniProgram({
                                    appId: Result.appId,
                                    extraData: Result.extraData
                                });
                            } else {
                                uni.getProvider({
                                    service: 'oauth',
                                    success: function (resp) {
                                        if (resp.provider) {
                                            uni.requestPayment({
                                                provider: resp.provider[0],
                                                orderInfo: data,
                                                timeStamp: data.timeStamp,
                                                nonceStr: data.nonceStr,
                                                package: data.package,
                                                signType: data.signType,
                                                paySign: data.paySign,
                                                success: function () {
                                                    that.$rectTo('/pages/index/pay_scs?playid=' + playid);
                                                },
                                                fail: function (err) {
                                                    console.log('fail:' + JSON.stringify(err));
                                                    that.$rectTo('/pages/index/orderList?status=0');
                                                }
                                            });
                                        }
                                    }
                                });
                            }
                            // #endif
                        } else {
                            this.$rectTo('/pages/index/pay_scs?playid=' + playid);
                        }
                    });
            }
        },
        computed: {
            ...mapState(['color', 'share_v_id', 'ordersShop_id', 'isContinue', 'openid']),
            allGoodsMoney() {
                if (!this.pageData) return;
                return Number(this.pageData.allGoodsMoney).toFixed(2);
            },
            freight() {
                const express = Number(this.pageData.express);
                if (express > 0) return express.toFixed(2);
            },

            distribution() {
                if (this.delivery == 1) {
                    return '快递 免运费';
                } else {
                    return '免运费';
                }
            },

            requestData() {
                return {
                    specs: this.specs,
                    open_group: this.open_group,
                    group_id: this.group_id,
                    goods_id: this.goods_id,
                    pageData: this.pageData,
                    goods_num: this.goods_num,
                    car_id: this.car_id,
                    useIntegral: this.useIntegral,
                    couponsId: this.couponsId,
                    record_id: this.record_id
                };
            },
            isshowWay() {
                if (!this.pageData) return;
                const isFlag = this.pageData.deliverys.includes(',');
                return isFlag;
            }
        }
    };
</script>
<style>
    page {
        background-color: #f2f2f2;
    }
</style>
<style lang="scss" scoped>
    .pageWrapper {
        // #ifdef H5
        padding-bottom: 160rpx;
        // #endif
        // #ifdef MP-WEIXIN
        padding-bottom: 250rpx;
        // #endif
    }

    .wrapper {
        width: 710rpx;
        background-color: #ffffff;
        padding: 10rpx 24rpx 24rpx 24rpx;
        margin: 30rpx auto 0;
        border-radius: 10rpx;

        .wrapper_view {
            border-bottom: 1rpx solid rgba(153, 153, 153, 0.3);
            padding-bottom: 20rpx;
        }

        .AllBox {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 20rpx 0;
        }

        .freight {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 20rpx 0;
        }

        .coupon {
            width: 100%;
            padding: 20rpx 0;
            display: flex;
            align-items: center;

            .couponBox {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: flex-end;
            }
        }

        .byJob {
            width: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-top: 30rpx;

            .allNum {
                color: #333;
                font-size: 26rpx;
            }
        }
    }

    .Pricesymbol {
        color: var(--color);
        font-size: 26rpx;
        margin-top: 10rpx;
    }

    .Price {
        color: var(--color);
        font-size: 36rpx;
    }

    .Message {
        width: 710rpx;
        background-color: #ffffff;
        padding: 10rpx 24rpx;
        margin: 20rpx auto 0;
        border-radius: 10rpx;

        .leaveword {
            width: 100%;
            display: flex;
            align-items: center;

            .leavInput {
                flex: 1;
                padding-left: 20rpx;
                height: 90rpx;
                text-align: right;
                font-size: 28rpx;
                color: #333;
            }

            .placeClass {
                color: #ccc;
                font-size: 28rpx;
            }
        }
    }

    .annunciate {
        width: 710rpx;
        background-color: #ffffff;
        padding: 24rpx;
        margin: 20rpx auto 0;
        border-radius: 10rpx;
    }

    .footer {
        width: 100%;
        background-color: #ffffff;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 100;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        border-top: 1px solid #f8f8f8;

        .footerBox {
            width: 100%;
            height: 120rpx;
            padding: 0 30rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .Copewith {
                display: flex;
                align-items: center;

                .withsymbol {
                    color: var(--color);
                    font-size: 26rpx;
                    margin-top: 24rpx;
                }

                .withPrice {
                    color: var(--color);
                    font-size: 52rpx;
                }
            }

            .subMit {
                width: 220rpx;
                height: 80rpx;

                color: #ffffff;
                font-size: 32rpx;
                border-radius: 40rpx;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }

    ::v-deep .u-number-box {
        &__input {
            font-size: 36rpx !important;
        }
    }

    .payList {
        width: 710rpx;
        background-color: #ffffff;
        padding: 30rpx 24rpx 6rpx 0;
        margin: 30rpx auto 0;
        border-radius: 10rpx;
        .item {
            min-width: 204rpx;
            height: 120rpx;
            margin: 0 0 24rpx 24rpx;
            border: 1rpx solid #ccc;
            border-radius: 8rpx;
            &.active {
                border: 1rpx solid var(--color);
                > view {
                    color: var(--color);
                }
            }
            &.disabled {
                background: #f8f8f8;
                > view {
                    color: #ccc;
                }
            }
        }
    }
</style>
